<template>
  <div>
    <z-space vertical>
      column: <el-slider :max="3" :step="1" :min="1" v-model="model.column"></el-slider>


      <z-descriptions :column="model.column" title="Descriptions Title">
        <template slot="tbody__before">
          <colgroup>
            <col width="150"></col>
          </colgroup>
        </template>
        <z-descriptions-item :label="'ColSpan' + 1" >
          <div>content</div>
        </z-descriptions-item>
        <z-descriptions-item label="XXX">XXX</z-descriptions-item>
        <z-descriptions-item label="XXX">XXX</z-descriptions-item>
<!--        <z-descriptions-item label="XXX">XXX</z-descriptions-item>-->

      <z-descriptions-item :label="'ColSpan' + 1" >
        <template #label>
          <div>slot label</div>
        </template>
        <div>content <el-button>111</el-button></div>
      </z-descriptions-item>
      </z-descriptions>
    </z-space>

    <RemoteFileViewer file="example/views/description/base.vue"></RemoteFileViewer>
  </div>
</template>

<script>

import RemoteFileViewer from "@example/plugins/example/components/RemoteFileViewer";
export default {
  components: {RemoteFileViewer},
  data() {
    return {
      model: {
        column: 1
      }
    }
  },
  setup() {
    return {
    }
  }
}
</script>
